<script setup lang="ts">
import { ref } from 'vue';

// 定义响应式数据
const phoneNumber = ref('');
const verificationCode = ref('');
const isCountingDown = ref(false);
const countdown = ref(60);

// 获取验证码函数
const getVerificationCode = () => {
  if (!phoneNumber.value || !/^1[3-9]\d{9}$/.test(phoneNumber.value)) {
    alert('请输入正确的手机号码');
    return;
  }

  isCountingDown.value = true;
  let timer = countdown.value;

  const interval = setInterval(() => {
    timer--;
    countdown.value = timer;

    if (timer <= 0) {
      clearInterval(interval);
      isCountingDown.value = false;
      countdown.value = 60;
    }
  }, 1000);

  // 实际项目中这里应该调用获取验证码的API
  console.log('发送验证码到:', phoneNumber.value);
};

// 登录函数
const login = () => {
  if (!phoneNumber.value || !/^1[3-9]\d{9}$/.test(phoneNumber.value)) {
    alert('请输入正确的手机号码');
    return;
  }

  if (!verificationCode.value || verificationCode.value.length !== 6) {
    alert('请输入6位验证码');
    return;
  }

  // 实际项目中这里应该调用登录API
  console.log('登录请求:', { phoneNumber: phoneNumber.value, verificationCode: verificationCode.value });
  alert('登录成功');
};
</script>

<template>
  <div class="container">
    <!-- 背景图 -->
    <div class="bg-image">

      <!-- 内容容器 -->
        <div class="content">
          <!-- banner图 -->
          <div class="banner">
            <img src="@/assets/img/login-banner.png" alt="国际漫游使用体验调研" />
          </div>

          <!-- 表单区域 -->
          <div class="form-container">
            <!-- 手机号输入 -->
            <div class="input-group">
              <label class="label">手机号</label>
              <input
                type="tel"
                v-model="phoneNumber"
                placeholder="请输入手机号"
                maxlength="11"
                class="input"
              />
            </div>

            <!-- 验证码输入 -->
            <div class="input-group verification-group">
              <label class="label">验证码</label>
              <input
                type="text"
                v-model="verificationCode"
                placeholder="请输入验证码"
                maxlength="6"
                class="input verification-input"
              />
              <button
                @click="getVerificationCode"
                :disabled="isCountingDown"
                class="verification-btn"
              >
                {{ isCountingDown ? `${countdown}秒后重新获取` : '获取验证码' }}
              </button>
            </div>

            <!-- 登录按钮 -->
            <button @click="login" class="login-btn">登录</button>
          </div>

          <!-- 底部元素图 -->
          <!-- <div class="bottom-image">
            <img src="@/assets/img/login-bottom.png" alt="底部装饰" />
          </div> -->
        </div>
    </div>


  </div>
</template>

<style scoped>
/* 引入公共字体样式 */
@import url('@/assets/styles/fonts.css');


/* // 添加全局样式重置 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 确保html和body充满整个屏幕 */
html, body {
  width: 100%;
  height: 100%;
  overflow-x: hidden;
}

/* 基础样式 */
.container {
  position: relative;
  width: 100%;
  min-height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 背景图 */
.bg-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background:
    url('@/assets/img/login-bottom.png') bottom center/100% auto no-repeat,
    url('@/assets/img/loginBg.jpg') top center/100% 100% no-repeat;
  z-index: 0;
}

/* 媒体查询优化 */
@media screen and (max-width: 768px) {
  .bg-image {
    background:
      url('@/assets/img/login-bottom.png') bottom center/100% auto no-repeat,
      url('@/assets/img/loginBg.jpg') top center/100% 100% no-repeat; /* 改为cover确保覆盖全屏 */
    background-color: #f0f0f0;
  }

  /* 小屏幕下移除内容最大宽度限制 */
  .content {
    max-width: 100%;
  }
}

/* 内容容器 */
.content {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 768px;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* padding: 0.3rem; */
  box-sizing: border-box;
}

/* banner图 */
.banner {
  width: 100%;
  /* margin-top: 0.5rem; */
  /* margin-bottom: 0.4rem; */
  text-align: center;
}

.banner img {
  width: 100%;
  height: auto;
}

/* 表单容器 */
.form-container {
  width: 90%;
  /* background-color: rgba(255, 255, 255, 0.85); */
  border-radius: 0.2rem;
  padding: 0 0.3rem;
  /* box-shadow: 0 0 0.2rem rgba(0, 0, 0, 0.1); */
}

/* 输入组 */
.input-group {
  margin-bottom: 0.3rem;
}

.label {
  display: block;
  font-size: 0.28rem;
  color: #333;
  margin-bottom: 0.1rem;
  /* 文字颜色上下渐变 */
  background: linear-gradient(to bottom, #ffffff, #ffe7ac);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-family: 'HYCuYuanJ', sans-serif;
  /* 增强文字阴影 */
  text-shadow: 0 0.05rem 0.15rem rgba(0, 0, 0, 0.2);
  font-weight: bold;
  margin-left: 0.3rem;
}

.input {
  width: 100%;
  height: 0.7rem;
  padding: 0 0.2rem;
  border: 1px solid #ddd;
  font-size: 0.28rem;
  box-sizing: border-box;
  background-color: #fff;
  border-radius: .25rem;
  box-shadow: 4.589px 6.553px 16px 0px rgba(14, 131, 232, 0.49);
}

/* 验证码组 */
.verification-group {
  display: flex;
  flex-direction: column;
  position: relative;
}

.verification-input {
  width: 100%;
  margin-bottom: 0.15rem;
}

.verification-btn {
  align-self: flex-end;
  padding: 0.15rem 0.3rem;
  background-color: #fff;
  border: none;
  border-radius: 0.3rem;
  font-size: 0.28rem;
  cursor: pointer;
  position: absolute;
  right: 0.1rem;
  bottom:0.18rem;
  background: linear-gradient(to bottom, #25b0ff, #026ccc);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: bold;
  font-family: 'HYQiHei-90J', sans-serif;
}

.verification-btn:disabled {
  background-color: #a9a9a9;
  cursor: not-allowed;
}

/* 登录按钮 */
.login-btn {
  height: 1.04rem;
  color: #2790e4;
  border: none;
  border-radius: 0.8rem;
  font-size: 0;
  font-weight: bold;
  cursor: pointer;
  margin: 0.2rem auto ;
  display: block  ;
  font-family: 'HYQiHei-90J', sans-serif;
  width: 4.3rem;
  /* border: 3px solid #2790e4; */
  /* box-shadow: 0 0 0.2rem #1f7cc8; */
  background: url('@/assets/img/loginBtn.png') center center/100% 100% no-repeat;

}

/* 底部元素图 */
.bottom-image {
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  text-align: center;
}

.bottom-image img {
  width: 100%;
  height: auto;
}

/* 响应式调整 */
@media (max-width: 375px) {
  .banner {
    margin-top: 0.3rem;
    margin-bottom: 0.3rem;
  }

  .form-container {
    width: 95%;
    padding: 0.25rem;
  }

  .input {
    height: 0.65rem;
  }

  .login-btn {
    height: 0.75rem;
  }
}

@media (min-width: 768px) {
  .content {
    justify-content: center;
    height: 100vh;
  }

  .banner {
    margin-top: 0;
    margin-bottom: 0.5rem;
  }

  .form-container {
    width: 70%;
    padding: 0.4rem;
  }
}
</style>
